<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style3.css">
</head>
<body>
	<div id="box">
		<div id="left_box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
		<div id="right_box">
			<div>tab1</div>
			<div>tab2</div>
			<div>tab3</div>
		</div>
	</div>
</body>
	<script type="text/javascript">
		var left_box = document.getElementById('left_box');
		var left_div = left_box.getElementsByTagName('div');
		var right_box = document.getElementById('right_box');
		var right_div = right_box.getElementsByTagName('div');
		for (var i = 0; i < left_div.length; i++) {
			left_div[i].onclick = left;
			left_div[i].index = i;
		}

		for (var i = 0; i < right_div.length; i++) {
			right_div[i].index = i;
			if (i == 0) {
				right_div[i].style.display = 'block';
			}
		}

		function left(){
			for (var i = 0; i < right_div.length; i++) {
				right_div[i].style.display = 'none';
				var temp = right_div[i].index;
				if (this.index == temp) {
					right_div[i].style.display = 'block';
				}
			}
		}

	</script>
</html>